<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
        }

        .menu li {
            line-height: 40px;
        }
    </style>
</head>

<body>
    <ul class="menu">
        <!-- <li>首页</li>
        <li>
            课程管理
            <ul>
                <li>课程列表</li>
                <li>添加课程</li>
                <li>课程分类</li>
            </ul>
        </li>
        <li>
            学员管理
            <ul>
                <li>学员列表</li>
                <li>添加学员</li>
            </ul>
        </li>
        <li>
            考试管理
            <ul>
                <li>考试列表</li>
                <li>添加考试</li>
                <li>考试分类</li>
            </ul>
        </li> -->
    </ul>


    <script>
        let menuData = [
            { title: "首页" },
            {
                title: "课程管理",
                children: [
                    { title: '课程列表' },
                    { title: '添加课程' },
                    { title: '课程分类' },
                ]
            },
            {
                title: "学员管理",
                children: [
                    { title: '学员列表' },
                    { title: '添加学员' },
                ]
            },
            {
                title: "考试管理",
                children: [
                    { title: '考试列表' },
                    { title: '添加考试' },
                    { title: '考试分类' },
                ]
            },
        ];



        const menuEle = document.querySelector('.menu');

        menuEle.innerHTML = menuData.map(item => {
            if(item.children) {
                // 进入if，说明当前item是有二级菜单的
                return (
                    `
                    <li>
                        ${item.title}
                        <ul>
                            ${item.children.map(childItem => {
                                return `<li>${childItem.title}</li>`
                            }).join("")}
                        </ul>
                    </li>
                `
                )
            }
            // 执行到这一步，说明item没有二级菜单
            return `<li>${item.title}</li>`
        }).join('')





    </script>
</body>

</html>